import { routes } from "../../database/routes.js";  // 导入路由配置数组，用于生成菜单结构
import {store1} from "../store.js";
import {roles} from "../../database/roles.js";

// 导出侧边栏组件名称标识
export var name = "sidebar";


/**
 * 生成侧边栏的HTML结构和样式
 * @returns {string} 包含侧边栏完整HTML和CSS的字符串
 */
export function render() {
    // 调用生成菜单HTML的函数，传入路由配置
    let menuHTML = generateMenuHTML(routes);

    // 返回侧边栏的完整结构（包含样式和HTML）
    return `
    <style>
      :root {
        /* 定义主题样式变量，便于统一维护和修改 */
        --primary-color: #4361ee; /* 主色调 */
        --primary-hover: #3a56d4; /* 主色调hover状态 */
        --secondary-color: #3f37c9; /* 次要色调 */
        --accent-color: #f72585; /* 强调色 */
        --text-color: #2b2d42; /* 文本颜色 */
        --text-light: #8d99ae; /* 浅色文本 */
        --light-bg: #f8f9fa; /* 浅色背景 */
        --dark-bg: #1a1b27; /* 深色背景 */
        --sidebar-bg: #1a1b27; /* 侧边栏背景色 */
        --sidebar-width: 15%; /* 侧边栏宽度 */
        --border-radius: 10px; /* 圆角半径 */
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); /* 小阴影 */
        --shadow-md: 0 4px 6px rgba(0,0,0,0.1); /* 中阴影 */
        --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); /* 大阴影 */
        /*--transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);*/ /* 过渡动画（注释备用） */
      }

      .sidebar {
        width: var(--sidebar-width); /* 使用变量定义宽度 */
        height: 100vh; /* 占满视口高度 */
        background: var(--sidebar-bg); /* 背景色 */
        color: white; /* 文本颜色 */
        position: fixed; /* 固定定位 */
        top: 0;
        left: 0;
        z-index: 100; /* 保证在其他元素上方 */
        overflow-y: auto; /* 内容溢出时可纵向滚动 */
        /*transition: var(--transition);*/ /* 过渡动画（注释备用） */
        scrollbar-width: thin; /* 滚动条样式 */
        scrollbar-color: rgba(255,255,255,0.2) transparent; /* 滚动条颜色 */
        display: flex; /* 使用flex布局 */
        flex-direction: column; /* 垂直排列子元素 */
        user-select: none; /* 禁止文本选中 */
      }

      /* 自定义滚动条样式（webkit内核） */
      .sidebar::-webkit-scrollbar {
        width: 6px;
      }
      .sidebar::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.2);
        border-radius: 3px;
      }

      .sidebar-search {
        padding: 16px; /* 内边距 */
        position: relative; /* 相对定位，用于子元素绝对定位 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* 底部边框 */
      }

     
      .sidebar-search {
        position: relative; /* 相对定位，用于搜索图标定位 */
      }

      .search-input {
        width: 100%; /* 占满容器宽度 */
        padding: 10px 40px 10px 16px; /* 内边距（右侧预留图标位置） */
        background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
        border: 1px solid rgba(255, 255, 255, 0.1); /* 边框 */
        border-radius: var(--border-radius); /* 圆角 */
        color: white; /* 文本颜色 */
        font-size: 0.875rem; /* 字体大小 */
        transition: var(--transition); /* 过渡动画（注释备用） */
      }

      /* 输入框聚焦状态样式 */
      .search-input:focus {
        outline: none; /* 去除默认聚焦边框 */
        border-color: var(--primary-color); /* 边框颜色变为主题色 */
        background: rgba(255, 255, 255, 0.15); /* 背景色加深 */
        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2); /* 聚焦阴影 */
      }

      /* 输入框占位符样式 */
      .search-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
      }

      .search-icon {
        position: absolute; /* 绝对定位 */
        right: 24px; /* 右侧距离 */
        top: 38px; /* 垂直居中 */
        transform: translateY(-50%); /* 精确居中 */
        color: rgba(255, 255, 255, 0.7); /* 图标颜色 */
        font-size: 1rem; /* 图标大小 */
      }
      
      .search-ul {
        list-style: none;
        border: 1px solid white;
        border-radius: 8px;
        position: absolute;
        min-width: 88%;
        background-color: white;
        z-index : 1000;
        display: none;
        max-height: 220px;
        overflow-y: auto;
      }
      .search-ul li{
        border-bottom : 1px solid gray;
      }
      .sidebar-search .search-ul li:last-child{
        border : none;
      }
      
      .search-ul li a{
        color: skyblue;
        padding : 10px;
        text-decoration : none;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
      }
      .search-ul li a:hover{
        color: dodgerblue;
      }
      
      .sidebar-header {
        padding: 20px 16px; /* 内边距 */
        display: flex; /* flex布局 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* 底部边框 */
      }

      .sidebar-header .logo {
        display: flex; /* flex布局 */
        align-items: center; /* 垂直居中 */
        gap: 12px; /* 元素间距 */
        font-size: 1.25rem; /* 字体大小 */
        font-weight: 600; /* 字体加粗 */
        color: white; /* 文本颜色 */
        text-decoration: none; /* 去除下划线 */
      }

      .sidebar-header .logo i {
        font-size: 1.5rem; /* 图标大小 */
        color: var(--primary-color); /* 图标颜色（主题色） */
      }

      .sidebar-menu {
        padding: 0 16px 24px; /* 内边距 */
        flex: 1; /* 占据剩余空间 */
        overflow-y: auto; /* 内容溢出时滚动 */
      }

      .menu-item {
        margin-bottom: 4px; /* 底部外边距 */
        position: relative; /* 相对定位，用于子菜单箭头定位 */
      }

      .menu-link {
        display: flex; /* flex布局 */
        align-items: center; /* 垂直居中 */
        padding: 12px 16px; /* 内边距 */
        color: rgba(255, 255, 255, 0.8); /* 文本颜色 */
        text-decoration: none; /* 去除下划线 */
        border-radius: var(--border-radius); /* 圆角 */
        transition: var(--transition); /* 过渡动画（注释备用） */
        font-size: 0.9375rem; /* 字体大小 */
        font-weight: 500; /* 字体加粗 */
        cursor: pointer; /* 鼠标指针样式 */
      }

      /* 菜单hover状态 */
      .menu-link:hover {
        background: rgba(255, 255, 255, 0.05); /* 背景色变化 */
        color: white; /* 文本颜色加深 */
      }

      /* 菜单激活状态 */
      .menu-link.active {
        background: var(--primary-color); /* 背景色为主题色 */
        color: white; /* 文本颜色 */
        box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3); /* 激活状态阴影 */
      }

      .menu-link i {
        margin-right: 12px; /* 右侧间距 */
        font-size: 1.1rem; /* 图标大小 */
        width: 24px; /* 固定宽度，保证对齐 */
        text-align: center; /* 文本居中 */
      }

      .submenu {
        padding-left: 16px; /* 左侧内边距（缩进效果） */
        max-height: 0; /* 初始高度为0（隐藏） */
        overflow: hidden; /* 超出部分隐藏 */
        /*transition: max-height 0.2s ease-out; */
      }

      /* 展开状态的子菜单 */
      .menu-item.expanded .submenu {
        max-height: 500px; /* 足够大的高度，显示所有子项 */ 
      }

      .submenu-item {
        margin-top: 4px; /* 顶部外边距 */
      }

      .submenu-link {
        display: block; /* 块级元素 */
        padding: 10px 16px 10px 40px; /* 内边距（更大的左侧缩进） */
        color: rgba(255, 255, 255, 0.6); /* 文本颜色 */
        text-decoration: none; /* 去除下划线 */
        border-radius: var(--border-radius); /* 圆角 */
        font-size: 0.875rem; /* 字体大小 */
        transition: var(--transition); /* 过渡动画（注释备用） */
        position: relative; /* 相对定位，用于激活状态标记 */
      }

      /* 子菜单hover和激活状态 */
      .submenu-link:hover,
      .submenu-link.active {
        color: white; /* 文本颜色 */
        background: rgba(255, 255, 255, 0.03); /* 背景色 */
      }

      .submenu-link.active {
        color: var(--primary-color); /* 激活状态文本颜色（主题色） */
        font-weight: 500; /* 字体加粗 */
      }

      /* 子菜单激活状态的左侧标记 */
      .submenu-link.active::before {
        content: ""; /* 空内容，用于样式 */
        position: absolute; /* 绝对定位 */
        left: 24px; /* 左侧距离 */
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%); /* 精确居中 */
        width: 6px; /* 宽度 */
        height: 6px; /* 高度 */
        border-radius: 50%; /* 圆形 */
        background: var(--primary-color); /* 背景色（主题色） */
      }

      /* 有子菜单的菜单项箭头 */
      .menu-item.has-submenu::after {
        content: "▶"; /* 箭头符号 */
        position: absolute; /* 绝对定位 */
        right: 16px; /* 右侧距离 */
        top: 14px; /* 顶部距离 */
        font-size: 0.75rem; /* 大小 */
        color: rgba(255, 255, 255, 0.5); /* 颜色 */
        transition: var(--transition); /* 过渡动画（注释备用） */
      }

      /* 展开状态的箭头旋转 */
      .menu-item.expanded::after {
        transform: rotate(90deg); /* 旋转90度（向下） */
      }

      /* 响应式样式（屏幕宽度<=992px时） */
      @media (max-width: 992px) {
        .sidebar {
          transform: translateX(-100%); /* 默认隐藏（移出屏幕） */
        }
        
        .sidebar.active {
          transform: translateX(0); /* 激活状态显示（移回屏幕） */
          box-shadow: 16px 0 32px rgba(0,0,0,0.2); /* 显示阴影 */
        }
      }
    </style>

    <!-- 侧边栏容器 -->
    <aside class="sidebar">
      <!-- 侧边栏头部（logo区域） -->
      <div class="sidebar-header">
        <a href="#/" class="logo">
          <i class="bi bi-shop"></i> <!-- 图标 -->
          <span>OurMall Admin</span> <!-- 标题 -->
        </a>
      </div>

      <!-- 搜索区域 -->
      <div class="sidebar-search">
        <div class="search-container">
          <i class="bi bi-search search-icon"></i> <!-- 搜索图标 -->
          <input 
            type="text" 
            class="search-input" 
            placeholder="搜索菜单..." 
            id="sidebarSearch"
          >
        </div>
        <ul class="search-ul">
           
        </ul>
      </div>

      <!-- 菜单区域（动态生成） -->
      <div class="sidebar-menu">
        ${menuHTML} <!-- 插入生成的菜单HTML -->
      </div>
    </aside>
  `;
}

/**
 * 根据路由配置生成菜单HTML结构
 * @param {Array} routes - 路由配置数组，每个路由包含path、name、icon、children等属性
 * @returns {string} 生成的菜单HTML字符串
 */
function generateMenuHTML(routes) {
    var html = ""; // 存储生成的HTML
    //用户已经登录了,信息存储在localStorage中
    var user = JSON.parse(localStorage.getItem('user-info') || "{}");
    //获取用户的角色id
    var roleObj = {};
    if(user.role){
        roleObj = roles.find(function(item){
            return item.id === user.role
        })
    }

    for (let i = 0; i < routes.length; i++)  {
        var route = routes[i];
        //roleObj.permission 是用户权限的数组  route.id 在不在 roleObj.permission 当中
        var getType = Object.prototype.toString.call(roleObj.permission);

        if(!["[object Boolean]", "[object Array]"].includes(getType)){
            return;
        }

        if( getType === "[object Boolean]" ? roleObj.permission : roleObj.permission.includes(route.id) ) {
            if (!route.children) { // 没有子路由的菜单项
                html += `
                <div class="menu-item">
                  <a href="#${route.path}" class="menu-link" data-target="true">
                    <i class="bi bi-${route.icon || 'bi bi-circle'}"></i> <!-- 图标（默认圆形） -->
                    <span>${route.name}</span> <!-- 菜单名称 -->
                  </a>
                </div>
              `;

            } else { // 有子路由的菜单项（可展开/折叠）
                html += `
                <div class="menu-item has-submenu" id="menu-${route.id}" data-sign="true">
                    <div class="menu-link">
                        <i class="bi bi-${route.icon || 'bi bi-circle'}"></i> <!-- 图标（默认圆形） -->
                        <span>${route.name}</span> <!-- 菜单名称 -->
                    </div>
                    <div class="submenu"> <!-- 子菜单容器 -->
                `;

                // 遍历子路由，生成子菜单
                route.children.forEach(function(child) {
                    if(getType === "[object Boolean]" ? roleObj.permission : roleObj.permission.includes(child.id)) {
                        html += `
                        <a href="#${child.path}" class="submenu-link" data-target="true">
                            <i class="bi bi-${child.icon || 'bi bi-circle'}"></i>
                            <span>${child.name}</span> <!-- 子菜单名称 -->
                        </a>
                    `;
                    }
                });

                html += `
                    </div>
                </div>
            `;
            }
        }


    };

    return html; // 返回生成的HTML
}

/**
 * 渲染后执行的函数，用于初始化侧边栏交互逻辑
 */
export function afterRender() {

    //========================================================================================

    // 获取菜单容器元素
    var sidebarMenu = document.querySelector('.sidebar-menu');

    // 给菜单容器添加点击事件（事件委派，处理动态生成的元素）
    sidebarMenu.addEventListener('click', function(e){
        var hasSubmenu; // 存储包含子菜单的元素

        // 判断点击的元素是否为有子菜单的菜单项（多种情况兼容）

        if(e.target.getAttribute('data-sign') === 'true')//如果点击的元素有sign属性
            hasSubmenu = e.target; // 就把点击的这个属性赋值给hasSubmenu
        else if(e.target.tagName === "I" || e.target.tagName === "SPAN")// 如果点击图标或文字
            hasSubmenu = e.target.parentElement.parentElement; // 获取父节点的父节点
        else if(e.target.classList.contains('menu-link'))//如果有menu-link类名
            hasSubmenu = e.target.parentElement; //父节点

        // 获取子菜单元素
        var submenu;
        if(hasSubmenu)//如果有父节点
            submenu = hasSubmenu.querySelector('.submenu');// 找到子菜单元素

        if(hasSubmenu?.classList.contains('expanded')){//如果可以获取这个类名,那么他就是打开的
            if (submenu) {//如果有子菜单
                hasSubmenu.classList.remove('expanded');
            }

        }else {
            if (submenu) {//如果有子菜单
                let allExpandedItem = sidebarMenu.querySelector('.expanded');
                allExpandedItem?.classList.remove('expanded');

                hasSubmenu.classList.add('expanded'); // 切换展开类名
            }

        }
    });


    //============================================================================================
    //1.默认加载的时候,检测hash
    //2.发现当前是一个子栏目 , 展开父级别 ; 本来就是一级菜单,则不管

    function defaultLoad(){
        var hash = location.hash.slice(1) || store1.state.activeMenu;
        var aObj = sidebarMenu.querySelector(`a[href="#${hash}"]`);
        var parentElement = aObj?.parentElement;

        //关闭上一个二级菜单
        sidebarMenu.querySelector(".expanded")?.classList.remove('expanded');

        //打开被选中的二级菜单
        if(parentElement?.classList.contains('submenu')){
            parentElement.parentElement.classList.add('expanded');
        }
    }
    defaultLoad();

    window.addEventListener("hashchange",defaultLoad);


    //==============================================================================================
    //1.搜素输入框 获取 焦点以后 立即绑定 键盘触发事件
    //2.鼠标移出收起菜单 点击了菜单的子选项以后 收缩
    //3.加上防抖

    var sidebarSearch = document.querySelector('.sidebar-search');
    var sidebarSearchInput = sidebarSearch.querySelector('input');
    var aLinks = document.querySelectorAll(`a[data-target="true"]`);
    var searchUl = document.querySelector(`.search-ul`);
    sidebarSearchInput.onfocus = function(e){
        var index = -1;
        var selectA = null; //li
        sidebarSearchInput.onkeyup = function(e){
            e.preventDefault();

            //当前选中的索引
            if(e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter"){
                inputSelector.call(this,e); //this.inputSelector(e);
            }else if(e.key === "ArrowDown"){
                if(index+1 < searchUl.children.length){
                    if(selectA){
                        selectA.style.color = "skyblue"; //修改回以前的颜色
                    }

                    selectA = searchUl.children[++index].firstChild; //变动为下一个a标签
                    selectA.style.color = "dodgerblue";

                    if(index > 4){
                        searchUl.scrollTop += selectA.parentElement.offsetHeight;
                    }

                }
            }else if(e.key === "ArrowUp"){
                if(index > 0){
                    if(selectA){
                        selectA.style.color = "skyblue"; //修改回以前的颜色
                    }

                    selectA = searchUl.children[--index].firstChild; //变动为下一个a标签
                    selectA.style.color = "dodgerblue";

                    if(index > 4){
                        searchUl.scrollTop -= selectA.parentElement.offsetHeight;
                    }

                }
            }else if(e.key === "Enter"){
                if(selectA){
                    var urlObj = new URL(selectA.href);
                    location.hash = urlObj.hash;
                    searchUl.style.display = "none";
                    sidebarSearchInput.value = "";
                }
            }else{
                return;
            }
        }

        sidebarSearchInput.onmouseenter = inputSelector;
        //事件流的触发顺序
        //leave : 捕获流  1.大标签 2.小标签
        //event.target : 找到了事件源 , 小标签就被确定
        //out   : 冒泡流  1.小标把内容  传导给大标签
        sidebarSearch.onmouseleave = function(event){
            sidebarSearchInput.onkeyup = null; //解除绑定
            searchUl.style.display = "none";

            sidebarSearchInput.blur();  //失去焦点
        }

    };

    searchUl.addEventListener('click', function(e){
        searchUl.style.display = "none";
        sidebarSearchInput.value = "";
    },true);



    function inputSelector(event){
        sidebarSearchInput.focus();
        //捕获当前输入框输入的内容
        var inputContext = this.value;

        var serachArray = [];

        if(inputContext !== ""){
            serachArray = [...aLinks].filter(function(link){
                return link.innerText.includes(inputContext);   //存储的是a标签
            })
        }else{
            searchUl.style.display = "none";
            return;
        }

        //如果li有10个,ul中放入10,每放入一个,dom元素会从新加载一次,dom加载了10次
        //重排 : 追加节点,删除节点 , 导致 dom树结构重新排列 , cssom重新绘制  [重排 一定会导致 重绘]
        //重绘 : 改变宽高 cssom 需要重新加载

        var html = "";
        serachArray.forEach((link) => {//link = <a>
            var li = document.createElement("li");
            var cloneLink = link.cloneNode(true);
            cloneLink.className = "";
            li.appendChild(cloneLink);
            html += li.outerHTML;
        });

        if(serachArray.length !== 0){
            searchUl.innerHTML = html;
            searchUl.style.display = "block";
        }

    }



}























